import React ,{useEffect,useState}from 'react'
import { Space, Table, Tag,  Button, message} from 'antd';
import {EditoApi,ChangeEditoApi} from '../../request/api'

interface IColumnsType {
  title: string;
  dataIndex: string;
  key: string;
  width?:string;
}
const columns: IColumnsType[] = [
  {
    title: '头像',
    dataIndex: 'avatar',
    key: 'avatar',
  },
  {
    title: '姓名',
    dataIndex: 'username',
    key: 'username',
  },
  {
    title: '角色',
    dataIndex: 'player',
    key: 'player',
  },
  {
    title: '编辑权限',
    key: 'editable',
    dataIndex: 'editable'
  },
  {
    title: '操作',
    key: 'btns',
    dataIndex: 'btns',
    width:'30%'
  },
]



const data = [
  {
    key:1,
    avatar: <img src="" alt="头像" />,
    username: '张飞',
    player: '编辑人员',
    editable: '1',
    btns: (
      <>
      <Button type="primary" >开通编辑权限</Button>
      <Button type="primary" danger>取消编辑权限</Button>
      </>
    ),
  },
  
];



export default function NameList() {
  const [num,setNum] = useState(0)
  // const [arr,setArr] = useState<IArr[]>([])
  const [arr,setArr] = useState([])
  useEffect(()=>{
    EditoApi().then((res:any)=>{
      if(res.errCode === 0){
        message.success(res.message)
        interface IArr  {
          key :Number;
          avatar:string;
          username:string;
          player:string;
          editable:string;
          btns:React.ReactNode;
        }
        // let newArr:IArr[] = []
        let newArr:any = []
        res.data.forEach((item:any)=>{
          let obj ={
            key:item.id,
            avatar: <img src={process.env.SERVER_PORT_IMG + '/'+ item.avatar} alt="头像" width='40' height='40' style={{borderRadius:'50px'}}/>,
            username: item.username,
            player: item.player ==='vip'?'管理员':'编辑人员',
            editable: item.editable == 1 ? '已开通':'未开通',
            btns: (
              <>
              <Button  style={{width:'150px'}} type="primary" onClick={()=>{openEditable(item.id,1)}}>开通编辑权限</Button>
              <Button type="primary" style={{width:'150px',marginLeft:'10px'}}  danger  onClick={()=>{openEditable(item.id,0)}} >取消编辑权限</Button>
              </>
            ),
          } 
          newArr.push(obj)
        })
        setArr(newArr)
      }else{
        message.error(res.message)
      }
      console.log(res)
    })
  },[num])

  const openEditable = (id:number,open:number)=>{
    ChangeEditoApi({
      id,
      open
    }).then((res:any)=>{
      if(res.errCode === 0){
        message.success(res.message)
        setNum(num+1)
      }else{
        message.error(res.message)
      }
    })
  }
  return (
    <div>
        <Table columns={columns} dataSource={arr} pagination={false}/>
    </div>
  )
} 
